import React from 'react';
import { Typography } from 'antd';
import { ConfigManager } from '../ConfigManager';
import { ImportResult } from '../../types';

const { Title } = Typography;

interface ImportExportTabProps {
  onConfigImported: (result: ImportResult) => void;
  disabled?: boolean;
}

export const ImportExportTab: React.FC<ImportExportTabProps> = ({
  onConfigImported,
  disabled = false
}) => {
  return (
    <div 
      style={{
        fontFamily: 'var(--eko-font-family-chinese)',
        fontSize: 'var(--eko-font-size-base)',
        lineHeight: 'var(--eko-line-height-base)',
      }}
    >
      <Title 
        level={3} 
        style={{
          fontFamily: 'var(--eko-font-family-chinese)',
          fontSize: 'var(--eko-font-size-lg)',
          fontWeight: 600,
          color: '#262626',
          marginBottom: '24px'
        }}
      >
        配置管理
      </Title>

      <ConfigManager 
        onConfigImported={onConfigImported}
        disabled={disabled}
      />
    </div>
  );
};